<template>
	<div class="gameWebview" :style="'height:'+heightvalue+'px;'" v-if="is_show">
		<iframe v-if="url" :src="url"></iframe>
		
		<div id="exit_btn" :style="'left: '+x+'px;top: '+y+'px;'" @touchstart="down" @touchend="up" @touchmove="move" @mousedown="down" @mouseup="up" @mousemove="mouseMove">

		</div>
	</div>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				start:0,
				is_show:false,
				url:'',
				x:0,
				y:0,
				xmax:0,
				ymax:0,
				cachex:0,
				cachey:0,
			}
		},
		props:{
			heightvalue:{
				type:String|Number
			}
		},
		mounted() {
			
		},
		methods:{
			show(url){
				if(localStorage.getItem('ISAPP')){
					this.url = url
					this.is_show = true
					this.$nextTick(()=>{
						this.xmax = document.documentElement.clientWidth-document.querySelector('#exit_btn').clientWidth
						this.ymax = document.documentElement.clientHeight-document.querySelector('#exit_btn').clientHeight
					})
				}else{
					setTimeout(()=>{
						window.open(url)
					},100)
				}
			},
			move(e){
				if(this.start == 1){
					let clientX = e.touches[0].clientX-document.querySelector('#exit_btn').clientWidth/2
					let clientY = e.touches[0].clientY-document.querySelector('#exit_btn').clientHeight/2
					
					let x = e.touches[0].clientX>this.xmax?this.xmax:clientX
					if(x<0) x =0;
				
					let y = e.touches[0].clientY>this.ymax?this.ymax:clientY
					if(y<0) y =0;
					
					this.x = x
					this.y = y
				}
				
			},
			mouseMove(e){
				if(this.start == 1){
					let clientX = e.clientX-document.querySelector('#exit_btn').clientWidth/2
					let clientY = e.clientY-document.querySelector('#exit_btn').clientHeight/2
					let x = clientX>this.xmax?this.xmax:clientX
					if(x<0) x =0;
					
					let y = clientY>this.ymax?this.ymax:clientY
					if(y<0) y =0;
					
					this.x = x
					this.y = y
				}
			},
			down(e){
				this.start = 1
				this.cachex = this.x
				this.cachey = this.y
			},
			up(e){
				this.start = 0
				if(this.cachex == this.x && this.cachey == this.y){
					this.url = ''
					this.is_show = false
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.gameWebview{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100000;
		width: 100vw;
		height: 100vh;
		background: #222222;
		iframe{
			border: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			right:0;
			z-index: 0;
		}
		#exit_btn{
			position: absolute;
			width: 1rem;
			height: 1rem;
			background: url(/icons/exit_btn.png) no-repeat center center;
			background-size: cover;
			z-index:9999;
			b{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>